<template>
  <div>
    <el-main>
      <el-row>
        <el-col
          class="border"
          :xs="{span: 24, offset: 0}"
          :sm="{span: 18, offset: 3}"
          :md="{span: 14, offset: 5}"
          :lg="{span: 8, offset: 8}"
          :xl="{span: 8, offset: 8}"
        >
          <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="item in imgurl" :key="item">
              <el-image :src="item" fit="fill"></el-image>
            </el-carousel-item>
          </el-carousel>
          <el-card class="box-card">
            <div slot="header" class="clearfix login-header">
              <span>
                <el-image :src=" imgHeader" fit="fill"></el-image>
              </span>
            </div>
            <div class="box-content">
              <el-form status-icon class="demo-ruleForm" @submit.native.prevent="Login">
                <el-form-item>
                  <el-input
                    id="user"
                    v-model="model.phone"
                    placeholder="输入手机号"
                    autocomplete="off"
                    :suffix-icon="userIcon"
                    @blur="checkUserName"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input
                    id="password"
                    :type="inputType"
                    v-model="model.password"
                    autocomplete="off"
                    placeholder="输入密码"
                  >
                    <i
                      class="el-icon-view el-input__icon"
                      type="primary"
                      slot="suffix"
                      @click="togglePassword"
                    ></i>
                  </el-input>
                </el-form-item>
                <el-form-item class="centerBtn">
                  <el-button type="primary" native-type="submit">登录</el-button>
                </el-form-item>
                <el-form-item class="centerBtn">
                  <el-button type="text" size="mini" @click="getRegisterPage">注册账号</el-button>
                  <el-button type="text" size="mini" @click="getForgetPage">忘记密码</el-button>
                </el-form-item>
                <span>
                  <el-image :src=" imgFooter" fit="fill"></el-image>
                </span>
              </el-form>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
    <siteFooter></siteFooter>
  </div>
</template>

<style lang="scss" scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.box-card {
  width: 25em;
  margin: 3em auto;
  @media screen and (max-width: 769px) {
    padding-top: 50px;
    width: 100%;
    height: 100%;
    margin-top: 0;
    border: none;
    box-shadow: none;
  }
  .box-content {
    margin-top: 20px;
    padding: 0;
    @media screen and (max-width: 769px) {
      margin-top: 20px;
      padding: 0;
      border: none;
      box-shadow: none;
    }
    .centerBtn {
      text-align: center;
    }
  }
  .login-header {
    text-align: center;
    span {
      font-size: 1.5em;
    }
  }
}
</style>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      imgurl: [
        require("../../assets/img/1.jpg"),
        require("../../assets/img/2.jpg"),
        require("../../assets/img/3.jpg")
      ],
      imgHeader: require("../../assets/img/5.jpg"),
      imgFooter: require("../../assets/img/4.jpg"),
      header: { menu: "登录", toPageName: "取消登录", to: "/index" },
      model: {
        phone: "",
        password: ""
      },
      userIcon: "el-icon-loading",
      passwordIcon: "el-icon-loading",
      inputType: "password"
    };
  },
  methods: {
    //这是存储全局变量的地方
    ...mapActions(["setToken", "setInitUserInfo"]),
    checkUserName() {
      if (!/^1[3456789]\d{9}$/.test(this.model.phone)) {
        this.userIcon = "el-icon-circle-close";
      } else {
        this.userIcon = "el-icon-circle-check";
      }
    },
    togglePassword() {
      if (this.inputType === "password") {
        this.inputType = "text";
      } else {
        this.inputType = "password";
      }
    },
    getRegisterPage() {
      this.$router.push("/register");
    },
    getForgetPage() {
      this.$router.push("/forget");
    },
    Login() {
      if (!this.model.phone) {
        this.$message({
          message: "账号不能为空!",
          type: "error"
        });
        return;
      }
      if (!this.model.password) {
        this.$message({
          message: "请输入密码!",
          type: "error",
          center: true
        });
        return;
      }
      var loginForm = {};
      loginForm.phone = this.model.phone;
      loginForm.password = this.model.password;
      this.$http.post("user/login", this.model).then(res => {
        if (res.data.code == 200) {
          this.setInitUserInfo(res.data.data);
          localStorage.token = res.data.data.token;
          this.setToken(res.data.data.token);
          this.$message.success("登录成功!");
          this.$router.push("/home");
        } else {
          this.$message.error(res.data.message);
        }
      });
    }
  },
  created() {}
};
</script>